<style>
.highlight {
  position: relative;
}
.highlight:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: .05rem solid rgba(0,255,0, .8);
  background: rgba(0,255,0, .1);
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div class="article box">
          <p>这段话里面有些 <span class="highlight">重要内容</span> 需要你注意。</p>
        </div>
        <div><pre class="prettyprint"><code>&lt;p&gt;&#x8fd9;&#x6bb5;&#x8bdd;&#x91cc;&#x9762;&#x6709;&#x4e9b; &lt;span class=&quot;highlight&quot;&gt;&#x91cd;&#x8981;&#x5185;&#x5bb9;&lt;/span&gt; &#x9700;&#x8981;&#x4f60;&#x6ce8;&#x610f;&#x3002;&lt;/p&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.highlight {
  position: relative;
}
.highlight:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: .05rem solid rgba(0,255,0, .8);
  background: rgba(0,255,0, .1);
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
